<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <title>Document</title>
  <style>
    .border-shadow{
      box-shadow: 0 0 3px gray;
    }
    .my-img{
      width:90px;
      height:90px;
      border:1px solid gray;
    }
  </style>
</head>

<body>
  <div class="container-fiuld p-3" id="app">
    <div class="card">
      <div class="card-header bg-transparent border-0">
        <ol class="breadcrumb pl-0 bg-transparent">
          <li class="breadcrumb-item pl-0"><a href="#">首页</a></li>
          <li class="breadcrumb-item active"><a href='#'>统计项目</a></li>
        </ol>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-3">
            <div class="media border border-light p-3 border-shadow">
              <div class="align-self-start mr-3 bg-info" style="height:60px;width:60px;border-radius:50%"></div>
              <div class="media-body">
                <h4 class="mb-4">收益余额</h4>
                <p class="h3"><mark class="text-primary h1 bg-transparent">0.00</mark>万元</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="media border border-light p-3 border-shadow">
              <div class="align-self-start mr-3 bg-light" style="height:60px;width:60px;border-radius:50%"></div>
              <div class="media-body">
                <h4 class="mb-4">可提现余额</h4>
                <p class="h3"><mark class="text-primary h1 bg-transparent">0.00</mark>万元</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="media border border-light p-3 border-shadow">
              <div class="align-self-start mr-3 bg-primary" style="height:60px;width:60px;border-radius:50%"></div>
              <div class="media-body">
                <h4 class="mb-4">总提现余额</h4>
                <p class="h3"><mark class="text-primary h1 bg-transparent">0.00</mark>万元</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-lg-3">
            <div class="media border border-light p-3 border-shadow">
              <div class="align-self-start mr-3 bg-secondary" style="height:60px;width:60px;border-radius:50%"></div>
              <div class="media-body">
                <h4 class="mb-4">旗下主播数</h4>
                <p class="h3"><mark class="text-primary h1 bg-transparent">0</mark>人</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="media border border-light p-3 border-shadow">
              <div class="align-self-start mr-3 bg-success" style="height:60px;width:60px;border-radius:50%"></div>
              <div class="media-body">
                <h4 class="mb-4">在线主播数</h4>
                <p class="h3"><mark class="text-primary h1 bg-transparent">0</mark>人</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer bg-transparent border-0">
        <div class="row">
          <div class="col-lg-2">
            <h4>官方联系方式</h4>
          </div>
        </div>
        <div class="row mt-2 mb-2">
          <div class="col-lg-2">
            <h6>官方客服联系人：</h6>
          </div>
          <div class="col-lg-2">
            <h6>官方客服手机号：</h6>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-2">
            <h6>官方客服微信号：1657943595</h6>
          </div>
          <div class="col-lg-2">
            <h6>官方客服邮箱：</h6>
          </div>
        </div>
        <div class="row mt-2 mb-2">
          <div class="col-lg-2">
            <h6 class="my-img"></h6>
          </div>
          <div class="col-lg-2">
            <h6>官方客服QQ：</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    //数据的交互脚本
    var vm = new Vue({
      el:"#app",
      data:{},
      created(){
        
      }
    })
  </script>
</body>

</html>
